<template>
  <el-row>
  <!-- 树区 -->
    <el-col class='mr20 userlist-tree' :xs='24' :sm='12' :md='12' :lg='12'>
       <el-input class='mt6 mb10'
          placeholder="输入关键字进行过滤"
          v-model.trim="filterText"  @focus='focusinput($event,1)'  @blur = 'blurinput($event,1)'>
       </el-input>
       <el-tree 
          :data="treedata"
          v-if='treedata.length>0'
          node-key="id"
          default-expand-all
          
          expand-on-click-node
          :filter-node-method="filterNode"
          ref="tree">
          <span class="custom-tree-node" slot-scope="{ node, data }" >

            <span>{{ data.name }}</span>
          
              
              <!-- <el-button     type="text" size="mini" title='查看' > <i class='icon icon-look'></i>ddd</el-button> -->
          
            <!-- <span class='vertical-middle option' style="visibility: hidden;">
              <el-button     type="text" size="mini" title='查看' @click.stop="checkUsergroup(data.code)"> <i class='icon icon-look'></i></el-button>
              <el-button     type="text" size="mini" title='编辑' @click.stop="editUsergroup(data.code)" style='margin-left:0;'> <i class='icon icon-edit'></i></el-button>
              <el-button  v-if='permit.apart_add' type="text" size="mini" title='添加' @click.stop="addUsergroup(data.name,data.code)" style='margin-left:0;'> <i class='icon icon-add'></i></el-button>
              <el-button     type="text" size="mini" title='删除'  @click.stop="() => remove(node, data)" style='margin-left:0;'> <i class='icon icon-delete'></i></el-button>
            </span> -->
          </span>
      </el-tree>
  </el-col>
</el-row>
</template>

<script charset="utf-8" type="text/javascript">
import { listMenu } from '@/api/settings/menuSetting' 
export default {
  name: 'menuSetting',
  data() {
    return {
       treedata:[],
      
    }
  },
  created(){
    this.pageInit()
  },
  methods: {
    pageInit(){
        let that=this
        /*请求树list  编辑新增  请求多次*/
        listMenu({pageSize:200}).then(res=>{
            if(res.data.flag == true){
              // console.log(res.data.dataList)
                let data = that.formTree(res.data.dataList)//通用
                // console.log(data)
                that.treedata=data//部门树
                // this.parentEditgroup=data//传给组件的值
            }
        }).catch(error => {
            that.outputError(error)
        })
    },
    formTree(departList){
        let data = [];

        departList.forEach((item)=>{
         
          if( item.parentId == '0' && item.id!=0){
            // console.log(item)
              data.push({
                id:item.id,
                name:item.name,
                code:item.code,
                parentId:item.parentId
              })
          }
          
        })
        // console.log(this.departList)
        return this.formNextTree(departList,data)

    },
    formNextTree(departList,data){
          data.forEach((item)=>{
          let child= []
          departList.forEach((it)=>{
              if(item.id == it.parentId){
                // console.log(it)
                  child.push({
                    id:it.id,
                    name:it.name,
                    code:it.code,
                    parentId:it.parentId
                  })
              }
            })
            item.children=child
            if(child.length>0){
                this.formNextTree(departList,child) //递归
            }
          })
          // this.treedata=data
          // console.log(data)
          // this.parentEditgroup=data
          return data
    },

    filterNode(value, data) {
        // console.log(value,data)
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
    },
    
    
  },
  mounted: function() {

  },
  updated(){
    
  },
  components:{
    
  }
}
</script>

<style  scoped>
.el-input{max-width:350px;}
.gapTime{width: 100px;} 
  /*.el-form-item{margin-bottom: 10px;}*/
</style>


